<template>
  <div class="language f14">
    <div @click="show = true">
      {{$t('选择语言')}}
      <van-icon class="vam" name="arrow-down" />
    </div>

    <van-action-sheet
      v-model:show="show"
      :title="$t('选择语言')"
      teleport="body"
      :cancel-text="$t('取消')"
      :actions="actions"
      @select="onSelect"
    />
  </div>
</template>
<script>
import {langs} from '@/lang'
import { mapState, useStore } from 'vuex'
import { useComputed, useMapState } from '@/utils/vuexm'
import { computed, ref } from 'vue'
export default {
    setup(){
        const store = useStore()
        const show = ref(false)
        const {lang} = useComputed(useMapState('user', ['lang']))
        const actions = computed(()=>langs.map(item=>{
            let _item = {name:item.name, key:item.key}
            item.key == lang.value && (_item.disabled = true)
            return  _item
        }))
        const onSelect = function(action, index){
            let _item = actions.value[index]
            if(_item.disabled){
                return
            }
            store.dispatch('user/setLang', _item.key)
            show.value = false
        }
        return {
            show,
            onSelect,
            actions
        }
    },
}
</script>
<style lang="less" scoped>
.language {
  color: var(--gray-1);
}
</style>
